import React, {PropTypes, Component} from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import assign from 'object-assign';
import {observer} from 'mobx-react';

import Track from '../track/index';

import "./index.scss";


// const _windowResizeFn = function (evt) {
//     // let me = this;
//     // let defaultWidth = $(window).width() / 3;
//     // let imgLength = CurStore.imgData.length;
//     //
//     // this.defaultLeft = 0 - (imgLength * defaultWidth)  + this.curIndex * (0 - defaultWidth);
//     //
//     // $(me.refs.group).css({
//     //     marginLeft: me.defaultLeft
//     // });
//     this.setState({
//         liWidth: (document.body.scrollWidth + 5) / 3
//     })
// };

@observer
export default class MainCmp extends Component {
    constructor(props) {
        super(props);
        let ww = $(window).width();
        let lw = 1190;//ww//ww / 3;
        let ismobileFlag = ww < 750;
        if(!ismobileFlag && lw < 590){
            lw = 590;
        }
        this.state = {
            ismobile: ismobileFlag,
            liWidth: ismobileFlag ? $(window).width() : lw
        };
    }
    componentDidMount() {
        // let _thisDom = ReactDOM.findDOMNode(this);
        // $(_thisDom).pignoseParallaxSlider({
        //     auto : false,
        //     play    : '.btn-play',
        //     pause   : '.btn-pause',
        //     next    : '.btn-next',
        //     prev    : '.btn-prev'
        // });

        this._init();

        // this._windowResize = _windowResizeFn.bind(this);
        // $(window).bind("resize", this._windowResize);

        if(this.props.auto === true){
            this._play();
        }
    }
    componentWillUpdate(){
        this._init();
    }
    componentWillUnmount(){
        this._stop();
    }
    curIndex = 1;
    _init(){
        let me = this;
        let defaultWidth = this.state.liWidth;
        let imgLength = this.props.data.length;

        let defaultLeft = 0 - (imgLength * defaultWidth);

        $(me.refs.group).css({
            marginLeft: defaultLeft
        });

        let dhFn = function (options) {
            if(me.donghuaing){
                return;
            }
            let nxLeft;
            if (options.action === 'prev') {
                me.curIndex = me.curIndex - 1;
                nxLeft = defaultLeft -= (0 - defaultWidth);
            } else {
                me.curIndex = me.curIndex + 1;
                nxLeft = defaultLeft += (0 - defaultWidth);
            }

            if(me.curIndex < 0){
                me.curIndex = imgLength + me.curIndex;
            }else if (me.curIndex === imgLength + 1) {
                me.curIndex = 1;
            }
            me.donghuaing = true;

            $(me.refs.group).animate({marginLeft: nxLeft}, {
                duration: me.props.speed,
                easing: 'easeInOutExpo',
                complete: function () {
                    me.donghuaing = false;
                    // if (nxLeft == (0 - (imgLength * defaultWidth * 2 - defaultWidth))){
                    if (me.curIndex === 1) {
                        // nxLeft = 0 - (imgLength * defaultWidth - defaultWidth);
                        nxLeft = 0 - (imgLength * defaultWidth);
                        defaultLeft = nxLeft;
                        $(me.refs.group).css({
                            marginLeft: nxLeft
                        });
                    }else if(me.curIndex === 2){
                        nxLeft = 0 - (imgLength * defaultWidth) - defaultWidth;
                        defaultLeft = nxLeft;
                        $(me.refs.group).css({
                            marginLeft: nxLeft
                        });
                    }
                    options.handler && options.handler.call(me);
                    // $(this).children('li').slice(0, index).appendTo($this);
                    // $(this).css({marginLeft: -_this[$this.data('type')].offset - _this[$this.data('type')].widthOnce + 'px'});
                    // if (typeof _this.settings.afterMoved === 'function') _this.settings.afterMoved();
                }
            });
        };
        this._stop = function () {
            this.timeoutObj && clearTimeout(this.timeoutObj);
        };
        this._play = function () {
            function dh() {
                this.timeoutObj = setTimeout(function () {
                    dhFn({
                        handler : dh
                    });
                }, me.props.interval);
            }
            dh.call(this);
        };
        this._prevClickFn = function () {
            dhFn({
                action : 'prev'
            });
        };
        this._nextClickFn = function () {
            dhFn({
                action : 'next'
            });
        };
    }
    _prevClick(){
        // this._stop();
        this._prevClickFn();
        // this._play();
    }
    _nextClick(){
        // this._stop();
        this._nextClickFn();
        // this._play();
    }
    render() {
        let me = this;

        let defaultWidth = this.state.liWidth;
        let imgData = this.props.data;
        let imgLength = imgData.length;
        let groupStyle = {
            width : imgLength * 3 * defaultWidth,
            // marginLeft : 0 - (imgLength * defaultWidth),
            overflow : 'hidden'
        };

        let liStyle = {
            overflow : 'hidden',
            width: defaultWidth,
            height: defaultWidth * 300 / 1200
        };

        let btnStyle = {
            width : "calc((100% - "+defaultWidth+"px)/2)",
            height : liStyle.height
        };
        // if(this.state.ismobile){
            btnStyle.width = 50;
        // }

        return (
            <div className={classNames({
                "pignose-parallaxslider" : true,
                "__ismobile" : this.state.ismobile
            })}>
                <div className="slide-visual" style={liStyle}>
                    <div className="slide_tint left" style={btnStyle}>
                        <div className="__btn __prev" onClick={this._prevClick.bind(this)}>
                        </div>
                    </div>
                    <div className="slide_tint right"  style={btnStyle}>
                        <div className="__btn __next"  onClick={this._nextClick.bind(this)}></div>
                    </div>
                    <ul className="slide-group" ref="group" style={groupStyle}>
                        {
                            imgData.map(function (item, index) {
                                let bgStyle = {
                                    backgroundImage: "url(" + (item.picLink || item.url) + ")"
                                };

                                let aEl = (
                                    <a href={item.href} target="_blank"/>
                                );
                                return (
                                    <li key={index} className="slide-dummy" style={assign(bgStyle, liStyle)}>
                                        {/*<img src={item.picLink || item.url} alt="slide image"/>*/}
                                        {
                                            me.props.trackType ? (
                                                <Track {...{
                                                    type: me.props.trackType + '_' + item.id + '_' + item.title
                                                }}>
                                                    {aEl}
                                                </Track>
                                            ) : aEl
                                        }
                                    </li>
                                );
                            })
                        }
                        {
                            imgData.map(function (item, index) {
                                let bgStyle = {
                                    backgroundImage : "url("+(item.picLink || item.url)+")"
                                };
                                let aEl = (
                                    <a href={item.href} target="_blank"/>
                                );
                                return (
                                    <li key={index} style={assign(bgStyle,liStyle)} >
                                        {/*<img src={item.picLink || item.url} alt="slide image"/>*/}
                                        {
                                            me.props.trackType ? (
                                                <Track {...{
                                                    type: me.props.trackType + '_' + item.id + '_' + item.title
                                                }}>
                                                    {aEl}
                                                </Track>
                                            ) : aEl
                                        }
                                    </li>
                                );
                            })
                        }
                        {
                            imgData.map(function (item, index) {
                                let bgStyle = {
                                    backgroundImage : "url("+(item.picLink || item.url)+")"
                                };
                                let aEl = (
                                    <a href={item.href} target="_blank"/>
                                );
                                return (
                                    <li key={index} className="slide-dummy" style={assign(bgStyle,liStyle)}>
                                        {/*<img src={item.picLink || item.url} alt="slide image"/>*/}
                                        {
                                            me.props.trackType ? (
                                                <Track {...{
                                                    type: me.props.trackType + '_' + item.id + '_' + item.title
                                                }}>
                                                    {aEl}
                                                </Track>
                                            ) : aEl
                                        }
                                    </li>
                                );
                            })
                        }
                    </ul>
                    {/*<div className="script-wrap">*/}
                        {/*<div className="slide-controller">*/}
                            {/*<a href="#" className="btn-prev"><img src="img/btn_prev.png" alt="Prev Slide"/></a>*/}
                            {/*<a href="#" className="btn-play"><img src="img/btn_play.png" alt="Start Slide"/></a>*/}
                            {/*<a href="#" className="btn-pause"><img src="img/btn_pause.png" alt="Pause Slide"/></a>*/}
                            {/*<a href="#" className="btn-next"><img src="img/btn_next.png" alt="Next Slide"/></a>*/}
                        {/*</div>*/}
                    {/*</div>*/}
                </div>
            </div>
        );
    }
}
MainCmp.defaultProps = {
    auto : true,
    speed : 1200,
    interval : 5000,
    data : []
};

MainCmp.propTypes = {
    //记录日志的类型
    trackType : PropTypes.string,
    //轮播作品数据
    data: PropTypes.array,
    //是否自动开始播放幻灯片 默认 true
    auto: PropTypes.bool,
    // 幻灯片的动画速度，单位毫秒，默认1200
    speed: PropTypes.number,
    //幻灯片播放的间隔时间，单位毫秒，默认5000
    interval: PropTypes.number
};
